<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Grade评分</view>
			<view class="tui-page__desc">可设置大小颜色，支持选择半星，支持手势touch选择。</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<view class="tui-grade__container">
				<view class="tui-title">基本用法</view>
				<tui-grade :score="score" @change="change"></tui-grade>
			</view>
			<view class="tui-grade__container">
				<view class="tui-title">设置大小(缩小)</view>
				<tui-grade :score="score" @change="change" :size="16"></tui-grade>
			</view>
			<view class="tui-grade__container">
				<view class="tui-title">设置颜色/间距</view>
				<tui-grade :score="score" @change="change" normal="#ccc" active="#ff7900" :width="24"></tui-grade>
			</view>
			<view class="tui-grade__container">
				<view class="tui-title">设置大小/间距</view>
				<tui-grade :score="score" @change="change" :size="24" :width="28"></tui-grade>
			</view>
			<view class="tui-grade__container">
				<view class="tui-title">设置星星数</view>
				<tui-grade :score="score" :quantity="8" @change="change"></tui-grade>
			</view>
			<view class="tui-grade__container">
				<view class="tui-title">不支持半星</view>
				<tui-grade :score="score" :isHalf="false" @change="change"></tui-grade>
			</view>
			<view class="tui-grade__container">
				<view class="tui-title">不可点击</view>
				<tui-grade :score="score" @change="change" disabled></tui-grade>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			score: 2.5
		};
	},
	methods: {
		change: function(e) {
			console.log(e);
			this.score = e.score;
		}
	}
};
</script>

<style>
.container {
	padding: 20rpx 0 120rpx 0;
	box-sizing: border-box;
}
.tui-grade__container {
	padding: 40rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
	background: #fff;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-title {
	font-size: 30rpx;
}
</style>
